<template>
  <div class="project-analyse">
    <router-header title="项目复盘详情">
    </router-header>
    <div>
      <el-form>
        <el-row :gutter="20">
            <el-col :span="6">
                <el-form-item label="项目名称：">{{
                  detail.projectName
                  }}</el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="项目编号：">{{
                  detail.projectCode
                  }}</el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="项目类型：">{{
                  detail.businessTypeName
                }}</el-form-item>
            </el-col>
        </el-row>
      </el-form>
      <el-form label-width="112px" :inline="true">
        <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="复盘参与人：" size="mini" prop="participant">
                  {{detail.analysePeopleName}}
                </el-form-item>
              </el-col>
              <el-col :span="24" style="position:relative; top:-2px; right:15px">
                <el-form-item label="复盘时间： " prop="AnalyseTime" size="mini">
                  {{detail.analyseDate}}
                  </el-form-item>
              </el-col>
          </el-row>
      </el-form>
      <div class="line"></div>
      <el-form
        :model="ruleForm"
        ref="ruleForm"
        :rules="rules"
      >
          <el-row :gutter="20">
              <el-col :span="24">
                <el-form-item label="项目执行情况：" prop="AnalyseResults">
                  {{detail.goalResult}}
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="项目出现的问题及原因及解决方法：" prop="AnalysisReason">
                  {{detail.analysisReason}}
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="项目可借鉴之处：" prop="Conclusionregular">
                  {{detail.conclusionRegular}}
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="附件：">
                  <Upload v-model="detail.feedbackFileList" fielState="12" :limit="10" :id="detail.id"></Upload>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="其他附件：">
                  <Upload v-model="detail.otherFileList" fielState="13" :limit="10" :id="detail.id"></Upload>
                </el-form-item>
              </el-col>
              <div>
                <!-- <el-col :span="4" style="font-size:20px">审批意见：</el-col> -->
                <!-- style="position: relative; right: 110px" -->
                <el-col :span="24">
                  <el-form-item label="审批意见" prop="approvalOpinionsInput">
                    <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="ruleForm.approvalOpinionsInput">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="24" style="position: relative; left: 445px; top: 30px;">
                  <el-form-item>
                    <el-button size="medium" type="primary" @click="handleClickApprovalProjectView(1)">通过</el-button>
                    <el-button size="medium" type="danger" plain @click="handleClickApprovalProjectView(2)">驳回</el-button>
                  </el-form-item>
                </el-col>
             </div>
          </el-row>
      </el-form>
    </div>
  </div>
</template>

<script>
import { Administration } from '@/api/projectAdministration.js';
import { getType } from '@/utils';
// import Enclosure from './Contractsinfo/Enclosure.vue';
export default {
  name: 'ProjectReviewExamineDetail',
  data () {
    return {
      ruleForm: {
        approvalOpinionsInput: ''
      },
      rules: {
        approvalOpinionsInput: [
          { required: true, message: '请输入驳回理由', trigger: 'blur'}
        ]
      },
      // approvalOpinionsInput: '',
      detail: ''
    }
  },
  components: {
  },
  created () {
    this.detail = this.$route.params.detail
    let accessory = this.detail?.feedbackFileList;
    this.detail.feedbackFileList = getType(accessory).isString ? JSON.parse(accessory) : accessory;
    let filePath = this.detail?.otherFileList;
    this.detail.otherFileList = getType(filePath).isString ? JSON.parse(filePath) : filePath;
    // this.projectName = this.$route.query.projectName
    // this.projectCode = this.$route.query.projectCode
    // this.businessTypeName = this.$route.query.businessTypeName
    // this.analysePeopleName = this.$route.query.analysePeopleName
    // this.analyseDate = this.$route.query.analyseDate
    // this.goalResult = this.$route.query.goalResult
    // this.analysisReason = this.$route.query.analysisReason
    // this.conclusionRegular = this.$route.query.conclusionRegular
    // this.projectId = this.$route.query.projectId
    // this.id = this.$route.query.id
  },
  methods: {
    handleClickApprovalProjectView (isState) {
      this.rules.approvalOpinionsInput[0].required = isState === 2
      this.$refs['ruleForm'].validate((valid) => {
        console.log(valid)
        if (valid) {
          Administration.projectViewapproval(this, {
            isState: isState,
            approvalIdea: this.detail.approvalOpinionsInput,
            projectId: this.detail.projectId,
            id: this.detail.id
          }).then((res) => {
            this.$message({
              message: '审批完成',
              type: 'success'
            })
            this.$router.go(-1)
          });
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.project-analyse{
  // 修改elment-ui样式，在有scoped情况下，加/deep/
  /deep/.el-form-item__label{
    font-weight: bold;
    font-size: 15px;
  }
  /deep/.el-input__inner{
    width: 300px;
  }
  // /deep/.el-col.el-col.el-col-24{
  //   line-height: 10px;
  // }
.line{
  width: 100%;
  height: 2px;
  background: rgba(242, 242, 242, 1);
  margin-bottom: 15px;
}
}
</style>
